<template>
  <el-select v-model="l_domainType" placeholder="请选择" :loading="loading" @change="selectChanged">
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
      <span style="float: left">{{ item.label }}</span>
      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
    </el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      options: [],
      l_domainType: null
    }
  },
  beforeMount() {
    ;(this.options = [
      { label: '系统管理域', value: 0 },
      { label: '业务管理域', value: 1 },
      { label: '站点管理域', value: 2 },
      { label: '站点用户域', value: 3 }
    ]),
      (this.l_domainType = this.domainType)
  },
  model: {
    prop: 'domainType',
    event: 'domainTypeSelected'
  },
  props: ['domainType'],
  methods: {
    selectChanged(params) {
      this.$emit('domainTypeSelected', params)
    }
  }
}
</script>